<template>
  <div class="commodityDetail" style="width: 100%">
    <!-- 头部 -->
    <div
      class="detailHeader"
      style="
        margin-top: 20px;
        width: 100%;
        height: 50px;
        background-color: #e1eced;
      "
    >
      <!-- 分类 -->
      <a href="/" style="float: left; padding-top: 15px; padding-left: 5px"
        >首页&nbsp;</a
      >
      <div
        class="headerfl"
        style="float: left; font-size: 14px"
        v-for="(xqfeilei, index) in xqfeileis"
        :key="xqfeilei.index"
      >
        <i style="padding-top: 16px; float: left" v-if="index != 0">></i>
        <a href="" style="padding-top: 16px; float: left">{{
          xqfeilei.named
        }}</a>
      </div>
      <!-- 店铺信息 -->
      <!-- 关注店铺 -->
      <div class="likeshop" @click="like">
        <i class="el-icon-star-off" v-if="counter == 0"></i>
        <i
          class="el-icon-star-off"
          style="backround-color: red; color: red"
          v-if="counter == 1"
        ></i>

        <span style="color: #666; font-size: 14px" v-if="counter == 0"
          >关注店铺</span
        >
        <span style="color: #666; font-size: 14px" v-if="counter == 1"
          >已关注店铺</span
        >
      </div>
      <!-- 店铺评分 -->
      <div class="shopinfo" style="float: right; font-size: 14px">
        <el-rate
          v-model="score"
          disabled
          show-score
          text-color="#ff9900"
          class="shopscore"
        >
        </el-rate>
        <!-- 店铺名 -->
        <a href="" class="shopname">鸿星尔克旗舰店</a>
      </div>
    </div>
    <!-- 主要内容 -->
    <div class="contain" style="width: 80%; margin: auto">
      <!-- 连接商品左右侧的div -->
      <div>
        <!-- 左侧大图跟小图 -->
        <div
          style="
            border: 2px solid color: black;
            width: 410px;
            margin-top: 20px;
            float: left;
          "
        >
          <!-- 大图 -->
          <div class="bigimg">
            <img
              :src="defaultbig"
              alt=""
              style="
                width: 100%;
                height: 100%;
                padding-top: 4px;
                padding-left: 4px;
              "
            />
          </div>
          <!-- 小图 -->
          <div class="smallimg">
            <img
              @click="getIndex(smallimg.smallimgspace)"
              :src="smallimg.smallimgspace"
              v-for="smallimg in smalimgs"
              :key="smallimg.id"
              class="smallImg"
            />
          </div>
        </div>
        <!-- 右侧杂七杂八 -->
        <div
          style="width: 530px; float: left; margin-top: 20px; margin-left: 40px"
        >
          <div style="height: 60px; float: right">
            <span style="font-size: 18px; line-height: 25px; color: #666">{{
              goodsinfo[0].goodsname
            }}</span>
          </div>
          <hr />
          <div class="goodsAtb" style="float: left">
            <!-- 秒杀价 -->
            <div style="margin-top: 10px">
              <span style="color: #999">秒 杀 价</span>
              <span style="font-size: 16px; color: red; padding-left: 10px">
                ￥
              </span>
              <span style="font-size: 20px; color: red"
                >{{ goodsinfo[0].nowprice }}
              </span>
            </div>
            <!-- 原价 -->
            <div style="margin-top: 10px">
              <span style="color: #999">原 价</span>
              <span style="font-size: 16px; color: red; padding-left: 31px">
                ￥
              </span>
              <span style="font-size: 20px; color: red"
                >{{ goodsinfo[0].oldprice }}
              </span>
            </div>
            <!-- 库存 -->
            <div style="margin-top: 10px; margin-bottom: 10px">
              <span style="color: #999">库 存</span>
              <span style="font-size: 16px; padding-left: 37px; color: #005ea7"
                >{{ goodsinfo[0].stock }}
              </span>
            </div>
            <div
              style="
                border-bottom: 1px dotted #dfdfdf;
                width: 530px;
                margin-bottom: 15px;
              "
            ></div>
            <!-- 选择规格 -->
            <div>
              <div v-for="(v, i) in list" :key="i" class="mt-20">
                <b>{{ v.name }}：</b>
                <el-checkbox-group v-model="checkList[i].list" :max="1">
                  <el-checkbox v-for="(k, j) in v.list" :key="j" :label="k" />
                </el-checkbox-group>
              </div>
              <div class="mt-20">
                <el-button type="primary" @click="handleClick">确定</el-button>
              </div>
              <div class="mt-20">
                <el-tag
                  v-for="(item, index) in skuList"
                  :key="index"
                  style="margin: 10px 5px"
                  >{{ item }}</el-tag
                >
              </div>
            </div>

            <div
              style="
                border-bottom: 1px dotted #dfdfdf;
                width: 530px;
                margin-bottom: 10px;
                margin-top: 10px;
                float: left;
              "
            ></div>
            <!-- 数量 -->
            <div style="margin-top: 5px; float: left">
              <el-input-number
                v-model="num"
                @change="handleChange"
                :min="1"
                :max="10"
                label="描述文字"
              ></el-input-number>
              <button
                style="
                  width: 120px;
                  height: 45px;
                  margin-left: 25px;
                  background-color: #f30213;
                  border: none;
                "
                class="buyoraddcar"
              >
                <span style="color: white" class="buyoraddcar" @click="goPay"
                  >直接下单</span
                >
              </button>
              <button
                style="
                  width: 120px;
                  height: 45px;
                  margin-left: 25px;
                  background-color: #f30213;
                  border: none;
                "
                class="buyoraddcar"
              >
                <span style="color: white" @click="gocard">加入购物车</span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <!-- 商品图文详情 -->
      <div style="width: 100%; float: left; margin-top: 20px">
        <img
          :src="goodsinfo[0].goodsdetailimg"
          alt=""
          style="width: 100%; height: 100%"
        />
      </div>
      <div
        style="
          width: 100%;
          margin-top: 5px;
          background-color: #eee;
          height: 40px;
          float: left;
          border: 1px solid rgb(203, 230, 253);
        "
      >
        <span style="font-size: 16px; color: #666; padding-top: 20px"
          >商品评价</span
        >
      </div>
      <!-- 评价 -->
      <div class="evaluate">
        <div
          class="allevaluate"
          style="width: 100px; float: left; padding: 6px 0 10px 40px"
        >
          <span style="color: #666">好评度: </span>
          <span style="color: red">98%</span>
        </div>
        <div style="float: left; padding-left: 20px">
          <el-tag type="info">标签三</el-tag>
          <el-tag type="info">标签三</el-tag>
          <el-tag type="info">标签三</el-tag>
          <el-tag type="info">标签三</el-tag>
        </div>
      </div>
      <!-- 用户评价 -->
      <div
        class="userevaluate"
        style="float: left; width: 100%"
        v-for="valuate in valuates"
        :key="valuate.id"
      >
        <el-card style="padding-bottom: 5px">
          <div
            style="
              color: #666;
              margin-right: 50px;
              width: 66px;
              height: 80px;
              float: left;
            "
          >
            <span>{{ valuate.username }}</span>
          </div>
          <div style="height: 80px; overflow: hidden">
            <el-rate
              v-model="valuate.score"
              disabled
              show-score
              text-color="#ff9900"
            >
            </el-rate>
            <span style="font-size: 14px">{{ valuate.content }}</span>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      divActive: 0,
      score: 3.9,
      num: 1,
      radio1: "上海",
      radio2: "北京",
      goodsinfo: [
        {
          id: 1,
          goodsname:
            "不锈钢脸盆!不锈钢脸盆!不要98、不要99、只要9.9，清仓大甩卖,走过路过不要错过!",
          nowprice: 9.9,
          oldprice: 98,
          stock: 86,
          goodsdetailimg: require("../imgs/115606GQtWW.jpg"),
        },
      ],
      // 小图
      smalimgs: [
        { id: 0, smallimgspace: require("../imgs/001313usLig.jpg") },
        { id: 1, smallimgspace: require("../imgs/221054bEiV2.jpg") },
        { id: 2, smallimgspace: require("../imgs/221310f3crw.jpg") },
        { id: 3, smallimgspace: require("../imgs/2333296zENB.jpg") },
        { id: 4, smallimgspace: require("../imgs/231504xVYr7.jpg") },
      ],
      // 关注店铺判断
      counter: 0,
      // 大图默认显示第一张
      defaultbig: require("../imgs/001313usLig.jpg"),
      // 头部分页
      xqfeileis: [
        {
          index: 1,
          named: "家用电器",
        },
        {
          index: 2,
          named: "家用电器",
        },
        {
          index: 3,
          named: "家用电器",
        },
        {
          index: 4,
          named: "家用电器",
        },
      ],
      // 用户评论
      valuates: [
        {
          id: 1,
          username: "小红红",
          content: "好，很好，非常好，越来越好，✌",
          score: 4.3,
        },
        {
          id: 2,
          username: "路人",
          content: "一般般吧，质感不好",
          score: 4.0,
        },
      ],
      // 选择规格
      list: [
        { name: "尺码", list: ["S", "M", "L", "XL", "XXL"] },
        { name: "颜色", list: ["红色", "黄色", "蓝色", "粉色", "紫色"] },
        { name: "图案", list: ["猫咪", "人物", "飞机", "闪电", "字母"] },
      ],
      checkList: [
        { name: "尺码", list: [] },
        { name: "颜色", list: [] },
        { name: "图案", list: [] },
      ],
      skuArray: [],
      skuList: [],
    };
  },
  methods: {
    goPay() {
      this.$router.push("/pay");
    },
    like() {
      if (this.counter == 0) {
        this.counter = 1;
      } else {
        this.counter = 0;
      }
    },
    getIndex(smalimgs) {
      this.defaultbig = smalimgs;
    },
    handleChange(value) {
      console.log(value);
    },
    gocard() {
      var isUser = localStorage.getItem("userId");
      if (isUser == null) {
        this.$router.push("/login");
      } else {
        this.$router.push("/GotoCart");
      }
    },
    // 规格选中
    handleClick() {
      // 先清空数据，保证连续点击按钮，数据不会重复
      this.skuArray = [];
      this.skuList = [];
      // 将选中的规格组合成一个大数组 [[1, 2], [a, b]...]
      this.checkList.forEach((element) => {
        element.list.length > 0 ? this.skuArray.push(element.list) : "";
      });
      // 勾选了规格，才调用方法
      if (this.skuArray.length > 0) {
        this.getSkuData([], 0, this.skuArray);
      } else {
        this.$message.error("请先勾选规格");
      }
    },
    // 递归获取每条SKU数据
    getSkuData(skuArr = [], i, list) {
      for (let j = 0; j < list[i].length; j++) {
        if (i < list.length - 1) {
          skuArr[i] = list[i][j];
          this.getSkuData(skuArr, i + 1, list); // 递归循环
        } else {
          this.skuList.push([...skuArr, list[i][j]]); // 扩展运算符，连接两个数组
        }
      }
    },
  },
};
</script>

<style scoped>
li {
  list-style: none;
}
a {
  color: rgb(0, 0, 0);
  text-decoration: none;
}
a:hover {
  color: red !important;
}
/* 评分 */
.shopscore {
  float: right;
  padding-right: 50px;
  padding-top: 16px;
}
/* 店铺名 */
.shopname {
  padding-top: 16px;
  float: right;
}
/* 关注店铺 */
.likeshop {
  cursor: pointer;
  float: right;
  padding-top: 16px;
  padding-right: 50px;
}

/* 大图 */
.bigimg {
  width: 400px;
  height: 400px;
}
/* 小图 */
.smallImg {
  margin-top: 15px;
  width: 66px;
  height: 66px;
  margin-left: 10px;
  /* cursor: pointer; */
  border: 2px solid white;
}
.smallImg:hover {
  border: 2px solid red;
}
/* 评价 */
.evaluate {
  float: left;
  margin-top: 20px;
  width: 100%;
  height: 60px;
  border-bottom: 1px solid gray;
  margin-bottom: 15px;
}

/* 点击下单。加入购物车 */
.buyoraddcar {
  cursor: pointer;
}

.mt-20 {
  margin-top: 20px;
}
</style>